<template>
  <task-container
    :isTable="false"
    :bodyStyle="{ 'flex-direction': 'column' }"
    @menuItemClick="onMenuItem"
    @setOperation="onSetOperation"
  >
    <a-tabs v-model="tabValue" @change="tabChange">
      <a-tab-pane :key="1" tab="个人访问信源">
        <div class="flex-pane">
          <div class="c-table" style="flex:0.8;">
            <task-user :taskId="taskId" @selectItemClick="onSelectItem" />
          </div>
          <div class="c-right">
            <h3>个人访问信源详情</h3>
            <a-space style="margin: 10px 0 20px;">
              <span
                >用户号码：
                <a v-if="Object.keys(selectItem).length > 0 && selectItem.phoneNumber">
                  {{ selectItem.phoneNumber }}
                </a>
              </span>
              <span
                >起止日期：
                <a v-if="Object.keys(selectItem).length > 0 && (selectItem.taskStartTime || selectItem.lastResultTime)">
                  {{ selectItem.taskStartTime }} -- {{ selectItem.lastResultTime }}
                </a>
              </span>
              <span
                >信源个数：
                <a v-if="Object.keys(pageData1).length > 0 && pageData1.total"> {{ pageData1.total }}个 </a>
                <a v-else>0个</a>
              </span>
            </a-space>
            <custom-table
              ref="table"
              rowKey="id"
              bordered
              :showAlert="false"
              :showSelection="false"
              :loading="loading1"
              :columns="columns1"
              :dataSource="pageData1"
              @change="onTableChange"
            >
              <template slot="lastVisitTime" slot-scope="text, record">
                <span v-if="text">{{ text | dayjs }}</span>
                <span v-else>{{ text }}</span>
              </template>
            </custom-table>
          </div>
        </div>
      </a-tab-pane>
      <a-tab-pane :key="2" tab="信源统计">
        <div class="flex-pane">
          <div class="c-table" style="flex:0.8;">
            <custom-table
              ref="table"
              rowKey="id"
              bordered
              :showAlert="false"
              :showSelection="false"
              :loading="loading2"
              :columns="columns2"
              :dataSource="pageData2"
              :rowClassName="rowClassName"
              @rowClick="onRowClick"
              @change="onTableChange"
            >
              <template slot="updateTime" slot-scope="text, record">
                <span v-if="text">{{ text | dayjs }}</span>
                <span v-else>{{ text }}</span>
              </template>
            </custom-table>
          </div>
          <a-carousel arrows>
            <div slot="prevArrow" class="custom-slick-arrow" style="left: 4px;zIndex: 1">
              <a-icon type="left-circle" />
            </div>
            <div slot="nextArrow" class="custom-slick-arrow" style="right: 4px">
              <a-icon type="right-circle" />
            </div>
            <div>
              <h3>信源访问趋势 ({{ this.source }})</h3>
              <sm-line
                class="graph-box"
                :data="graphOptionData1"
                :color="graphOptionColor"
                v-if="graphOptionData1.length > 0"
              />
              <a-empty class="graph-box" v-else />
            </div>
            <div>
              <h3>访问时段分布 ({{ this.source }})</h3>
              <sm-rank-bar
                class="graph-box"
                :data="graphOptionData2"
                :color="graphOptionColor"
                v-if="graphOptionData2.length > 0"
              />
              <a-empty class="graph-box" v-else />
            </div>
            <div>
              <h3>用户访问信源次数 TOP10 ({{ this.source }})</h3>
              <sm-rank-y-bar
                class="graph-box"
                :barWidth="16"
                :data="graphOptionData3"
                :color="graphOptionColor"
                v-if="graphOptionData3.length > 0"
              />
              <a-empty class="graph-box" v-else />
            </div>
          </a-carousel>
        </div>
      </a-tab-pane>
      <a-button slot="tabBarExtraContent" @click="doFetch" v-if="isOperation"> 更新数据 </a-button>
    </a-tabs>
  </task-container>
</template>
<script>
import * as eventModelApi from '@/api/wxSmuggle/eventModel.js'
import taskContainer from '../modules/taskContainer'
import taskUser from '../modules/taskUser'
import smRankYBar from '@/components/echarts/smRankYBar'
import CustomTable from '@/components/zxd/Table/CustomTable'
import SmLine from '@/components/echarts/smLine.vue'
import smRankBar from '@/components/echarts/smRankBar.vue'
export default {
  components: {
    taskContainer,
    taskUser,
    smRankYBar,
    CustomTable,
    SmLine,
    smRankBar
  },
  data() {
    return {
      loading1: false,
      loading2: false,
      selectKey: null,
      taskId: null,
      source: null,
      tabValue: 1,
      columns1: [
        {
          title: '序号',
          width: 60,
          dataIndex: 'order',
          customRender: (text, record, index) =>
            `${(this.pageFilter1.pageNo - 1) * this.pageFilter1.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '信源域名',
          dataIndex: 'source',
          width: 120
        },
        {
          title: 'url',
          dataIndex: 'lastVisitUrl',
          width: 120
        },
        {
          title: '访问时间',
          dataIndex: 'lastVisitTime',
          width: 120,
          scopedSlots: { customRender: 'lastVisitTime' }
        }
      ],
      columns2: [
        {
          title: '序号',
          width: 50,
          align: 'center',
          dataIndex: 'order',
          customRender: (text, record, index) =>
            `${(this.pageFilter2.pageNo - 1) * this.pageFilter2.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '信源域名',
          dataIndex: 'source',
          width: 60,
          align: 'center'
        },
        {
          title: '访问人数',
          dataIndex: 'uv',
          width: 60,
          align: 'center'
        },
        {
          title: '访问次数',
          dataIndex: 'pv',
          width: 60,
          align: 'center'
        },
        {
          title: '更新时间',
          dataIndex: 'updateTime',
          width: 70,
          align: 'center',
          scopedSlots: { customRender: 'updateTime' }
        }
      ],
      pageFilter1: {
        pageNo: 1,
        pageSize: 10
      },
      pageFilter2: {
        pageNo: 1,
        pageSize: 10
      },
      pageData1: {},
      pageData2: {},
      selectItem: {},
      graphOptionColor: ['#00a2ff', '#00cece', '#ffd550', '#ff934a', '#ff6c6d', '#ff74c2', '#c7468e'],
      graphOptionData1: [],
      graphOptionData2: [],
      graphOptionData3: [],
      isOperation: true
    }
  },
  mounted() {},
  methods: {
    onSetOperation(isOperation) {
      this.isOperation = isOperation
    },
    //获取个人访问信源详情列表
    getPersonalSourceList() {
      let obj = {
        incidentTaskId: this.taskId,
        msisdn:
          this.selectItem && Object.keys(this.selectItem).length > 0 && this.selectItem.phoneNumber
            ? this.selectItem.phoneNumber
            : null
      }
      let form = Object.assign({}, obj, this.pageFilter1)
      this.loading1 = true
      eventModelApi
        .gePersonalList(form)
        .then(res => {
          if (res.success) {
            this.pageData1 = res.result ? res.result : {}
            this.loading1 = false
          } else {
            this.$message.warn(res.message)
            this.loading1 = false
          }
        })
        .catch(e => {
          this.loading1 = false
          this.$message.warn('请求失败！')
        })
    },
    //获取信源统计列表
    getSourceList() {
      let obj = {
        incidentTaskId: this.taskId
      }
      let form = Object.assign({}, obj, this.pageFilter2)
      this.loading2 = true
      eventModelApi
        .getSummaryOverviewBy(form)
        .then(res => {
          if (res.success) {
            this.pageData2 = res.result ? res.result : {}
            // 默认点击第一条记录
            if (this.pageData2 && Object.keys(this.pageData2).length > 0 && this.pageData2.total > 0) {
              this.onRowClick(this.pageData2.records[0])
            }
            this.loading2 = false
          } else {
            this.$message.warn(res.message)
            this.loading2 = false
          }
        })
        .catch(e => {
          this.loading2 = false
          this.$message.warn('请求失败！')
        })
    },
    // 切换分页
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      //个人访问信源详情-切换分页
      if (this.tabValue === 1) {
        this.pageFilter1 = Object.assign({}, this.pageFilter1, paginations)
        this.getPersonalSourceList()
        //信源统计列表-切换分页
      } else if (this.tabValue === 2) {
        this.pageFilter2 = Object.assign({}, this.pageFilter2, paginations)
        this.getSourceList()
      }
    },
    // 信源访问趋势
    getSumarryDateTrendBy() {
      let form = {
        incidentTaskId: this.taskId,
        source: this.source
      }
      eventModelApi
        .getSumarryDateTrendBy(form)
        .then(res => {
          if (res.success) {
            let result = res.result ? res.result : []
            let data = []
            for (let i in result) {
              let obj = { product: result[i].date, 数量: result[i].count }
              data[i] = obj
            }
            this.graphOptionData1 = data
          } else {
            this.$message.warn(res.message)
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    // 访问时段分布
    getSumarryHourTrendBy() {
      let form = {
        incidentTaskId: this.taskId,
        source: this.source
      }
      eventModelApi
        .getSumarryHourTrendBy(form)
        .then(res => {
          if (res.success) {
            let result = res.result ? res.result : []
            let data = []
            for (let i in result) {
              let obj = { product: result[i].typeName, 数量: result[i].count }
              data[i] = obj
            }
            this.graphOptionData2 = data
          } else {
            this.$message.warn(res.message)
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    // 访问信源次数
    getSumarryTopBy() {
      let form = {
        incidentTaskId: this.taskId,
        source: this.source
      }
      eventModelApi
        .getSumarryTopBy(form)
        .then(res => {
          if (res.success) {
            let result = res.result ? res.result : []
            let data = []
            for (let i in result) {
              let obj = { product: result[i].typeName, count: result[i].count }
              data[i] = obj
            }
            this.graphOptionData3 = data
          } else {
            this.$message.warn(res.message)
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    // 更新数据
    doFetch() {
      let form = {},
        api
      console.log(this.tabValue)
      if (this.tabValue == 1) {
        form = {
          incidentTaskId: this.taskId,
          msisdn:
            this.selectItem && Object.keys(this.selectItem).length > 0 && this.selectItem.phoneNumber
              ? this.selectItem.phoneNumber
              : null
        }
        api = eventModelApi.personalDoFetch(form)
      } else {
        form = {
          incidentTaskId: this.taskId
        }
        api = eventModelApi.sourceDoFetch(form)
      }
      api
        .then(res => {
          if (res.success) {
            this.$message.success(res.message ? res.message : '更新成功')
            if (this.tabValue == 1) {
              this.getPersonalSourceList()
            } else {
              this.getSumarryDateTrendBy()
              this.getSumarryHourTrendBy()
              this.getSumarryTopBy()
            }
          } else {
            this.$message.warn(res.message ? res.message : '更新失败')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    // 个人访问信源、信源统计切换
    tabChange(val) {
      if (val == 2) this.getSourceList()
    },
    // 获取左边任务选中taskId
    onMenuItem(id) {
      console.log(id)
      this.taskId = id
    },
    // 获取个人访问信源-单条记录
    onSelectItem(item) {
      console.log(item)
      this.selectItem = item
      this.getPersonalSourceList()
    },
    // 点击信源统计列表-单条记录
    onRowClick(keys) {
      console.log(keys)
      this.selectKey = keys && Object.keys(keys).length > 0 && keys.id ? keys.id : null
      this.source = keys && Object.keys(keys).length > 0 && keys.source ? keys.source : null
      this.getSumarryDateTrendBy()
      this.getSumarryHourTrendBy()
      this.getSumarryTopBy()
    },
    // 选中信源统计列表-单条记录-class
    rowClassName(record, index) {
      let className = ''
      if (record.id === this.selectKey) className = 'row-selected'
      return className
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.row-selected {
  background-color: #e6f7ff;
}
.graph-box {
  height: 460px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
/deep/.ant-table {
  line-height: 1.9;
}
/deep/.model-main-right {
  width: auto;
  .ant-card-body {
    > * {
      width: auto;
    }
  }
}
.flex-pane {
  display: flex;
  > * {
    flex: 1;
    margin-right: 20px;
    width: 0;
    &.c-table {
      flex: 0.8;
    }
    &:last-child {
      margin-right: 0;
    }
    h3 {
      color: #666;
      text-align: left;
      background-color: #f2f2f2;
      padding: 14px;
    }
  }
}
/deep/.ant-carousel {
  .slick-slide {
    text-align: center;
    height: 500px;
    overflow: hidden;
  }
  .custom-slick-arrow {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: #666;
    &:before {
      display: none;
    }
    &:hover {
      opacity: 0.5;
    }
  }
}
</style>
